<template>
  <div class="page">
    <au-panel class="section" title="不同样式的按钮">
      <!-- 组件示例 -->
      <div class="component-example">
        <el-row>
          <ep-button name="默认按钮"></ep-button>
          <ep-button name="主要按钮" type="primary"></ep-button>
          <ep-button name="成功按钮" type="success"></ep-button>
          <ep-button name="信息按钮" type="info"></ep-button>
          <ep-button name="警告按钮" type="warning"></ep-button>
          <ep-button name="危险按钮" type="danger"></ep-button>
        </el-row>

        <el-row style="margin-top: 20px;">
          <ep-button name="朴素按钮" plain></ep-button>
          <ep-button name="主要按钮" type="primary" plain></ep-button>
          <ep-button name="成功按钮" type="success" plain></ep-button>
          <ep-button name="信息按钮" type="info" plain></ep-button>
          <ep-button name="警告按钮" type="warning" plain></ep-button>
          <ep-button name="危险按钮" type="danger" plain></ep-button>
        </el-row>

        <el-row style="margin-top: 20px;">
          <ep-button name="圆角按钮" round></ep-button>
          <ep-button name="主要按钮" type="primary" round></ep-button>
          <ep-button name="成功按钮" type="success" round></ep-button>
          <ep-button name="信息按钮" type="info" round></ep-button>
          <ep-button name="警告按钮" type="warning" round></ep-button>
          <ep-button name="危险按钮" type="danger" round></ep-button>
        </el-row>

        <!-- <el-row>
          <ep-button icon="el-icon-search" circle></ep-button>
          <ep-button type="primary" icon="el-icon-edit" circle></ep-button>
          <ep-button type="success" icon="el-icon-check" circle></ep-button>
          <ep-button type="info" icon="el-icon-message" circle></ep-button>
          <ep-button type="warning" icon="el-icon-star-off" circle></ep-button>
          <ep-button type="danger" icon="el-icon-delete" circle></ep-button>
        </el-row> -->

        <code-h v-show="codeShow1" lang="html" content='
          <el-row>
            <ep-button name="默认按钮"></ep-button>
            <ep-button name="主要按钮" type="primary"></ep-button>
            <ep-button name="成功按钮" type="success"></ep-button>
            <ep-button name="信息按钮" type="info"></ep-button>
            <ep-button name="警告按钮" type="warning"></ep-button>
            <ep-button name="危险按钮" type="danger"></ep-button>
          </el-row>

          <el-row style="margin-top: 20px;">
            <ep-button name="朴素按钮" plain></ep-button>
            <ep-button name="主要按钮" type="primary" plain></ep-button>
            <ep-button name="成功按钮" type="success" plain></ep-button>
            <ep-button name="信息按钮" type="info" plain></ep-button>
            <ep-button name="警告按钮" type="warning" plain></ep-button>
            <ep-button name="危险按钮" type="danger" plain></ep-button>
          </el-row>

          <el-row style="margin-top: 20px;">
            <ep-button name="圆角按钮" round></ep-button>
            <ep-button name="主要按钮" type="primary" round></ep-button>
            <ep-button name="成功按钮" type="success" round></ep-button>
            <ep-button name="信息按钮" type="info" round></ep-button>
            <ep-button name="警告按钮" type="warning" round></ep-button>
            <ep-button name="危险按钮" type="danger" round></ep-button>
          </el-row>
        '></code-h>
        <el-button type="text" style="width:100%; text-align: center; margin-top:30px;" @click="codeShow1 = !codeShow1">
          {{codeShow1 ? "隐藏代码" : "显示代码"}}
        </el-button>
      </div>
    </au-panel>
    <au-panel class="section" title="禁用状态的按钮">
      <div class="component-example">
        <el-row>
          <ep-button disabled name="默认按钮"></ep-button>
          <ep-button disabled name="主要按钮" type="primary"></ep-button>
          <ep-button disabled name="成功按钮" type="success"></ep-button>
          <ep-button disabled name="信息按钮" type="info"></ep-button>
          <ep-button disabled name="警告按钮" type="warning"></ep-button>
          <ep-button disabled name="危险按钮" type="danger"></ep-button>
        </el-row>
      </div>
      <code-h v-show="codeShow2" lang="html" content='
        <el-row>
          <ep-button disabled name="默认按钮"></ep-button>
          <ep-button disabled name="主要按钮" type="primary"></ep-button>
          <ep-button disabled name="成功按钮" type="success"></ep-button>
          <ep-button disabled name="信息按钮" type="info"></ep-button>
          <ep-button disabled name="警告按钮" type="warning"></ep-button>
          <ep-button disabled name="危险按钮" type="danger"></ep-button>
        </el-row>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center; margin-top:30px;" @click="codeShow2 = !codeShow2">
        {{codeShow2 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="加载状态的按钮">
      <div class="component-example">
        <el-row>
          <ep-button type="primary" loading name="加载中"></ep-button>
        </el-row>
      </div>
      <code-h v-show="codeShow3" lang="html" content='
        <el-row>
          <ep-button type="primary" loading name="加载中"></ep-button>
        </el-row>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center; margin-top:30px;" @click="codeShow3 = !codeShow3">
        {{codeShow3 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="不同大小的按钮">
      <div class="component-example">
        <el-row>
          <ep-button name="默认大小"></ep-button>
          <ep-button size="medium" name="中等大小"></ep-button>
          <ep-button size="small" name="小型大小"></ep-button>
          <ep-button size="mini" name="迷你大小"></ep-button>
        </el-row>
      </div>
      <code-h v-show="codeShow4" lang="html" content='
        <el-row>
          <ep-button name="默认大小"></ep-button>
          <ep-button size="medium" name="中等大小"></ep-button>
          <ep-button size="small" name="小型大小"></ep-button>
          <ep-button size="mini" name="迷你大小"></ep-button>
        </el-row>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center; margin-top:30px;" @click="codeShow4 = !codeShow4">
        {{codeShow4 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="控制按钮的上下间距">
      <div class="component-example">
        <el-row>
          <ep-button name="无间距"></ep-button>
        </el-row>
        <el-row>
          <ep-button top="30" name="往上有30px间距"></ep-button>
        </el-row>
        <el-row>
          <ep-button bottom="10" name="往下有10px间距"></ep-button>
        </el-row>
      </div>
      <code-h v-show="codeShow4" lang="html" content='
        <el-row>
          <ep-button name="无间距"></ep-button>
        </el-row>
        <el-row>
          <ep-button top="30" name="往上有30px间距"></ep-button>
        </el-row>
        <el-row>
          <ep-button bottom="10" name="往下有10px间距"></ep-button>
        </el-row>
      '></code-h>
      <el-button type="text" style="width:100%; text-align: center; margin-top:30px;" @click="codeShow4 = !codeShow4">
        {{codeShow4 ? "隐藏代码" : "显示代码"}}
      </el-button>
    </au-panel>
    <au-panel class="section" title="Props">
      <au-table>
        <thead>
          <tr>
            <th>字段</th>
            <th>必填</th>
            <th>类型</th>
            <th>默认</th>
            <th>可选</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>name</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>空</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>
              按钮信息<br>
              如不填，则会出现"请填写name属性"的提示信息
            </td>
          </tr>
          <tr>
            <td>type</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>空</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">primary</li>
                <li class="au-theme-border-color--base-8">success</li>
                <li class="au-theme-border-color--base-8">info</li>
                <li class="au-theme-border-color--base-8">warning</li>
                <li class="au-theme-border-color--base-8">danger</li>
              </ol>
            </td>
            <td>
              按钮类型
            </td>
          </tr>
          <tr>
            <td>size</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>空</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">默认大小</li>
                <li class="au-theme-border-color--base-8">medium</li>
                <li class="au-theme-border-color--base-8">small</li>
                <li class="au-theme-border-color--base-8">mini</li>
              </ol>
            </td>
            <td>
              按钮尺寸
            </td>
          </tr>
          <tr>
            <td>plain</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>是否朴素按钮</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>禁用</td>
          </tr>
          <tr>
            <td>loading</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">true</li>
                <li class="au-theme-border-color--base-8">false</li>
              </ol>
            </td>
            <td>加载中</td>
          </tr>
          <tr>
            <td>top/bottom</td>
            <td>
              <!-- <au-icon type="check" class="au-theme-color--success"></au-icon> -->
              <au-icon type="times"></au-icon>
            </td>
            <td>String</td>
            <td>空</td>
            <td><au-icon type="minus"></au-icon></td>
            <td>向上或者向下的margin间距</td>
          </tr>
        </tbody>
      </au-table>
    </au-panel>
    <au-panel class="section" title="Slots">
      <au-table>
        <thead>
          <tr>
            <th>名称</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>默认slot</td>
            <td>
              按钮内容
            </td>
          </tr>
        </tbody>
      </au-table>
    </au-panel>
    <!-- <au-panel class="section" title="Events">
      <au-table>
        <thead>
          <tr>
            <th>名称</th>
            <th>参数</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>@click</td>
            <td>
              <ol class="option-list">
                <li class="au-theme-border-color--base-8">event</li>
              </ol>
            </td>
            <td>点击事件</td>
          </tr>
        </tbody>
      </au-table>
      <cite class="cite au-theme-before-background-color--base-8 au-theme-color--base-5">当需要监听除点击事件之外的其它事件时，请使用<span class="code au-theme-radius au-theme-background-color--warning-bottom">.native</span>修饰符</cite>
    </au-panel> -->
    <!-- <au-panel class="section" title="Methods">
      <au-icon type="minus"></au-icon>
    </au-panel> -->
    <!-- <au-panel class="section" title="使用示例">
      <h4 class="title-1">基础用例</h4>
      <code-h lang="html" content='
        <au-button type="primary" @click="loading = !loading">按钮</au-button>
        <au-button type="primary" :disabled="true">按钮</au-button>
        <au-button type="primary" :loading="loading">按钮</au-button>
      '></code-h>
      <code-h lang="js">
        export default {
          data () {
            return {
              loading: true
            }
          }
        }
      </code-h>
    </au-panel> -->
  </div>
</template>
<script>
export default {
  name: 'button-examples',
  data () {
    return {
      loading: true,
      // 显示代码
      codeShow1: false,
      codeShow2: false,
      codeShow3: false,
      codeShow4: false,
      codeShow5: false
    }
  }
}
</script>
